import { Button, CalendarPickerView, Card, NavBar, Popup, ResultPage, Tabs } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'

import { setCitySelect, updateCitySelect } from '../../store/userSlice'
import { useNavigate } from 'react-router-dom'
import dayjs from 'dayjs'
function Index() {

  const user = useSelector((state) => state.user)
  const [visible1, setVisible1] = useState(false)
  const dispatch = useDispatch()
  const navigate = useNavigate()
  return (
    <div>
      <NavBar >车票/船票</NavBar>
      <ResultPage
        status=' '
        title=' '
        description=' '
      >
        <Card >
          <Tabs>
            <Tabs.Tab title='汽车票' key='fruits'>
              菠萝
            </Tabs.Tab>
            <Tabs.Tab title='船票' key='vegetables'>

              <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                <div onClick={() => {
                  navigate('/city?type=start')
                }}>
                  {user.start}
                </div>
                <div onClick={() => {
                  dispatch(updateCitySelect());
                }}>
                  <LoopOutline />
                </div>

                <div onClick={() => {
                  navigate('/city?type=end')
                }}>
                  {user.end}
                </div>
              </div>

              <div onClick={() => {
                setVisible1(true)
              }} style={{ marginTop: '10px' }}>
                {user.date}
              </div>

              <div>
                <Button onClick={() => {
                  navigate('/order')
                }} style={{ marginTop: '10px' }} block color='primary' size='large'>
                  查询
                </Button>
              </div>
            </Tabs.Tab>

          </Tabs>
        </Card>
      </ResultPage>


      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
        bodyStyle={{ height: '70vh' }}
      >
        <CalendarPickerView min={dayjs(new Date())} max={dayjs(new Date()).add(15, 'day')} onChange={(date) => {
          if (date) {
            const val = dayjs(date).format("YYYY-MM-DD");
            dispatch(
              setCitySelect({ type: "date", val: val })
            );
            setVisible1(false);
          }
        }}
        />
      </Popup>
    </div>
  )
}

export default Index